<template>
  <div>
      <el-table :data="bannerlist" height="250" border style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="title" label="轮播图标题" width="180">
          </el-table-column>
          <el-table-column prop="img" label="图片" width="180">
              <template slot-scope="item">
                  <div>
                      <img v-if="item.row.img" :src="item.row.img" alt="" class="imgUrl">
                  </div>
              </template>
          </el-table-column>
          <el-table-column label="状态">
              <template slot-scope="item">
                  <div>
                      <el-tag type="success" v-if="item.row.status">正常</el-tag>
                      <el-tag type="danger" v-else>禁用</el-tag>
                  </div>
              </template>
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="item">
                  <div>
                    <el-button type="primary" icon="el-icon-edit" plain   @click="edit(item.row.id)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" plain @click="del(item.row.id)">删除</el-button>
                      
                  </div>
              </template>
          </el-table-column>
      </el-table>
  </div>
</template>

<script>
// 引入辅助性函数
import { mapActions, mapGetters } from 'vuex'
// 引入接口
import { bannerDelete } from '../../request/api'
export default {
  data() {
      return {

      }
  },
  mounted() {
      this.getBanner()
  },
  computed: {
      ...mapGetters({
          bannerlist: 'banner/getBannerList',
      })
  },
  methods: {
      ...mapActions({
          getBanner: 'banner/changeBannerAction',
      }),
      edit(id) {
          // console.log('编辑');
          this.$emit('edit', id)
      },
      del(id) {
          // console.log('删除');
          this.$confirm("你确定要删除这条数据吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          })
              .then(() => {
                  //调用删除接口
                  bannerDelete({
                      id
                  }).then((res) => {
                      console.log(res, '删除');
                      if (res.code == 200) {
                          this.$message.success(res.msg);
                          // 重新触发列表和总条数行动
                          this.getBanner()
                      } else {
                          this.$message.error(res.msg);
                      }
                  });
              })
              .catch(() => {
                  this.$message({
                      type: "info",
                      message: "已取消删除",
                  });
              });
      }
  }
};
</script>

<style scoped>
.imgUrl{
  width: 70%;
  height: 70%;
}
</style>
